<html>
	<head>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
		<script type="text/javascript" src="gmap3.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$('#map1').gmaps({
					center:{
						address:'Los Angeles, CA'
					},
					zoom:10
				});	
				$('#map2').gmaps({
					geolocation:{
						geolocate:true,
						marker:{
							show:true
						}
					}
				});
				$('#map3').gmaps({
					mapType:'satellite',
					markers:[
						{
							address:'Paris, France',
							info:{
								html:'<h1>Paris</h1>',
								autoOpen:true
							}
						},
						{
							address:'London, England'
						},
						{
							latitude:40.4166909,
							longitude:-3.7003454,
							info:{
								html:'<h1>Madrid</h1>',
								autoOpen:false
							}
						}
					],
					fitToPoints:true
				});
				$('#map4').gmaps({
					center:{
						address:'Shanghai, China'
					},
					places: {
						searchBox:'google-search-place',
								
						placeChanged:{
							action:'marker',
							zoom:13,
							callback:function(place) {
								console.log(place);	
							}
						}
					}
				});
			});
		</script>
		<style type="text/css">
		body {
			font-family:"Helvetica", sans-serif;
			width:800px;
			margin:40px auto;
		}
		.map {
			width:800px;
			height:500px;
			display:block;
		}
		pre {
			padding:10px;
			background:#d2d1d1;
			border:dashed 1px #3a3a3a;
			font-family:"Monaco", monospace;
		}
		</style>
	</head>
	<body>
		<h1>Torchd JavaScript Library for Google Maps API v3</h1>
		<h2>Demos</h2>
		<h3>1) Basic Map</h3>
		<pre>$('#map1').gmaps({
	center:{
		address:"Los Angeles, CA"
	},
	zoom:10
});</pre>
		<div class="map" id="map1">
		
		</div>
		
		<h3>2) Get the user's location</h3>
		<pre>$('#map2').gmaps({
	geolocation:{
		geolocate:true,
		marker:{
			show:true
		}
	}
});</pre>
		<div id="map2" class="map">
		
		</div>
		
		<h3>3) Multiple Markers + Satellite</h3>
		<pre>$('#map3').gmaps({
	mapType:'satellite',
	markers:[
		{
			address:'Paris, France',
			info:{
				html:'&lt;h1&gt;Paris&lt;/h1&gt;',
				autoOpen:true
			}
		},
		{
			address:'London, England'
		},
		{
			latitude:40.4166909,
			longitude:-3.7003454,
			info:{
				html:'&lt;h1&gt;Madrid&lt;/h1&gt;',
				autoOpen:false
			}
		}
	],
	fitToPoints:true
});</pre>
		<div id="map3" class="map">
		
		</div>
		<h3>4) Integrate with Google Places</h3>
		<pre>$('#map4').gmaps({
	center:{
		address:'Shanghai, China'
	},
	places: {
		searchBox:'google-search-place',
				
		placeChanged:{
			action:'marker',
			zoom:13,
			callback:function(place) {
				console.log(place);	
			}
		}
	}
});</pre>
		<input id="google-search-place" placeholder="Search for a place"/>
		<div id="map4" class="map">
		
		</div>
		
	</body>
</html>